// Header
$header                              : $secondary !default;
$header-link                         : $light-grey !default;
$header-link-active                  : $primary !default;
$user-btn                            : darken($header, 10%) !default;
$nav-spacing: 3.5px;

$project-nav-hover: $secondary !default;
$project-nav-active: $dropdown-link-hover-bg !default;

.embedded HEADER {
  display: none;
}

.embedded FOOTER {
  display: none;
}

.page-header {
  @include no-select;
  // margin-bottom: 10px;
.div>.div2>div{
  float: left;
}

  // 顶部
.div1 {
    font-size: .9em;
    // width: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    // .ember-basic-dropdown-content {
    //   font-size:  15px;
    // }

    // .ember-basic-dropdown-trigger {
    //   a {
    //     text-decoration: none;
    //   }
    // }

    // .dropdown-menu {
    //   background: $dropdown-bg;
    //   border: 0;
    //   z-index: 4;
    //   padding: 0;
    //   top: auto!important;
    //   border-radius: 0;
    //   box-shadow: $darken-helper 0 0 7px;
    // }

    > ul {
      background-color: #438EB9;
      // border-radius: 3px 0 0 3px;
      padding: 0;
      vertical-align: middle;
      height: 50px;
      margin: 0;

      &.nav-main {
        flex-grow: 1;
      }
      .dasc{
        margin-top: 15px;
      }
      .dasc>div{
        display: inline;
        
      }
      .dasc>div:last-child{
        margin-left: 10px;
        margin-top: 15px;
        color: white;
        font-family: 'Kai', 'KaiTi','楷体', 'Microsoft YaHei', '微软雅黑';
        font-size: 24px;
      }
      // .dasc>div:last-child{
      //   margin-top: 18px;
      //   margin-left: 5px;
      //   font-size: 12px;
      //   font-family: 'Microsoft YaHei', '微软雅黑';
      //   color: white;
      // }
      > li {
        list-style-type: none;
        display: inline-block;

        &.active {
          .ember-basic-dropdown-trigger  a,
          > a {
            color: $info;
            text-decoration: none;
            margin: 0;
          }
        }

        .ember-basic-dropdown-trigger a,
        > a {
          color: $header-link;
          display: block;
          padding: 11px;
          border-bottom: solid $nav-spacing transparent;
          border-top: solid $nav-spacing transparent;

          &:hover {
            background-color: darken($header, 5%);
            color: white;
            text-decoration: none;
          }

          .icon-chevron-down {
            font-size: .75em;
          }
        }
      }
    }

    .try-dashboard {
      background-color: #438EB9;
      display: flex;
      height: 50px;
      align-items: center;

      .btn {
        border-radius: 90px;
      }
    }
}

// 侧边导航和主体内容
.div2{
  // float: left;
  // display: inline;
  background-color:white;
  height: 100%;
    // 侧边导航
    >.div3{
      min-height: 200vh;
      width: 13%;
      background-color:#F2F2F2; 

      >ul{
        padding: 0px !important;
        margin-top: 0px !important;  
           >div>li{
            list-style: none;
            border: 1px solid #E5E5E5;
            border-left: 0;
            >div>div>div{
              >a>div:first-child{
                margin-left: 10px;
                margin-top: -10px;
              }
              >a>div:nth-child(2){
                margin-left: 32px;
                margin-top: -12px;
              }
            }
            >a{
              margin-left: 10px;
            }
          } 
           >li{
            list-style: none;
            border: 1px solid #E5E5E5;
            padding: 0;
            border-left: 0;
            >a{
              margin-left: 10px;
              display: block;
              height: 39px;
              line-height: 39px;
            }
            
            >div>.div5{
              background-color: #FFFFFF !important;
              >li{
                height: 39px;
                // min-height: 39px;
                border: 1px solid #E5E5E5;
                >a>span{
                  display: block;
                  line-height: 39px;
                  margin-left: 20px;
                }
              }
              
            }
            >div>div>a{
              padding: 0px;
              margin-left: 10px;
              display: block;
              height: 39px;
              // 设置垂直居中
              line-height: 39px;
              >span{
                margin-left: 126px;
              }
            }
        }
      }


     
    }
    
    // 右侧内容
    >.div4{ 
      height: 100%;
      // margin-top: -1760px;
      // margin-left: 100px;
      margin-left: 5px;
      width: 85%;
    }
  
}

  .nav-logo {
    height: 48px;
    background-size: auto 32px;
    background-position: left center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin: 0;
    padding: 0;
  }

  .nav-user {
    border-radius: 0 3px 3px 0;
    margin: 0;
    position: relative;
    z-index: 4;

    // .nav-item {
    //   a.nav-link {
    //     padding: 0;
    //     display: inline-block;
    //     border: none;
    //   }
    // }

    // > li > a {
    //   display: block;
    //   padding: 4px 10px;

    //   &:hover {
    //     border-bottom-color: transparent;
    //   }
    }

    .user-auth {
      line-height: initial;
      padding: 10px 20px 10px 10px;
      background: $accent-bg;
    }

    > div:hover {
      background: darken($header, 5%);
    }
  }

  .nav-item {
    position: relative;
  }

  .nav-cluster {
    // float: left;
    // background-color: $user-btn;

    a {
      &:hover {
        text-decoration: none;
      }

      &.text-white:hover {
        // background: mix($user-btn, black, 80%);

        &::after {
          border-left-color: mix($user-btn, black, 80%);
        }
      }
    }

    .project-menu .global ul li a:hover {
      background: transparent;
    }


    .ember-basic-dropdown-trigger {
      height: 39px !important;
      max-width: 300px;
      @include clip;
      @include hand;

      > a {
        padding-right: 30px;
        padding-left: 10px;

        // &::after {
        //   content: '';
        //   border-left: 6px solid $user-btn;
        //   border-top: 6px solid transparent;
        //   border-bottom: 6px solid transparent;
        //   position: absolute;
        //   top: 20px;
        //   right: -6px;
        // }

        &.two-line {
          padding-top: 1px;
          padding-bottom: 0;
        }

        &:focus {
          text-decoration: none;
        }
      }

    }

    .chevron {
      color: #585858;
      position: absolute;
      right: 10px;
      top: 21px;
    }
  }

  .ember-basic-dropdown-trigger {
    &.active {
      > a {
        color: $info;
        text-decoration: none;
        margin: 0;
      }
    }

    > a {
      color:#585858 ;
      // display: block;
      padding: 11px;
      border-bottom: solid $nav-spacing transparent;
      border-top: solid $nav-spacing transparent;

      .icon-chevron-down {
        font-size: .75em;
      }
    }

  }

  .quick-add {
    display:table-cell;
    border-radius: 0;
    margin: 0;
    padding: 0;
    li {
      display: block;
      a {
        display: block;
      }
    }
  }

  .logo-oss {
    // width: 80px;
    // background-image: url('images/logos/main.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 32px;
  }

  .bg-error.badge-xs {
    position: absolute;
    right: 4px;
    top: 15px;
    text-align: center;
    width: 19px;
    border-radius: 90%;

    a {
      color: white;
    }
  }

  .project-link {
    position: relative;
    .default-project {
      position: absolute;
      font-size: 10px;
      left: 10px;
      top: 8px;
      color: $warning;

      &.nested {
        left: 25px;
      }
    }
  // }
}

.project-menu {
  overflow: hidden;
  border: 0;
  box-shadow: $darken-helper 0 0 7px;

  $labels: 22px;
  $item: 50px;

  .clusters UL, .projects UL {
    overflow-y: auto;
  }

  display: grid;
  grid-template-rows: $item auto;

  LABEL {
    @include clip;
    height: $labels;
    color: $text-muted;
    font-size: .8em;
    padding: 0 10px;
    display: block;
    border-bottom: 1px solid $accent-border;
  }

  .clusters {
    grid-column-start: 1;
    grid-row-start: 2;
    // border-right: 1px solid $table-border-color;
    background-color: $accent-bg;

    ul.no-hover-entry li.item.cluster.active,
    ul li.item.cluster.hover {
      position: relative;

      &:after {
        content: '';
        border-right: 8px solid $dropdown-bg;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 17px;
        right: 0;
      }
    }
  }

  .projects {
    grid-column-start: 2;
    grid-row-start: 2;

    UL {
      border-left: 1px solid transparent;
    }
  }

  .global {
    > ul.list-unstyled {
      &:first-child {
        border-right: 1px solid $table-border-color;
      }
    }
  }

  .global, .search {
    background-color: darken($accent-bg,2%);
    border-bottom: $table-border-color;

    ul .item.active {
      background: $project-nav-active;
      a {
        color: white;
      }
    }
  }

  .global {
    grid-column-start: 1;
    grid-row-start: 1;
    ul li.item {
      padding: 5px 10px;
    }
  }

  .search {
    grid-column-start: 2;
    grid-row-start: 1;
    padding: 7px 10px;
  }

  .search-match {
    font-weight: bold;
    background-color: lighten($warning, 25);
  }

  .item {
    height: $item;
    padding: 5px 20px;
    @include hand;

    &.active {
      background-color: $project-nav-active;
      a {
        color: white;

        + .state {
          color: white;
        }
      }
    }

    &:not(:first-child) {
      border-top: 1px solid $accent-border;
    }
  }

  .global > ul.list-unstyled > LI:hover,
  .item.cluster.hover {
    background-color: black;
    A, .state {
      color: white;
    }
  }

  .item.project:hover {
    background-color: $project-nav-hover;
    A, .state {
      color: white;
    }
  }

  .state {
    color: $text-muted;
    font-size: .8em;
    padding: 0;
    margin: 0;
  }

  LI {
    &.active {
      A, .state {
        color: $link-color;
      }
    }

    &.not-ready {
      cursor: not-allowed;

      A, .state {
        cursor: not-allowed !important;
        color: $text-muted;
        text-decoration: none;
      }
    }
  }

  .global {
    A {
      display: block;
      padding: 10px;
    }
  }
}
